We're using cookies, but you can turn them off in your browser settings. Otherwise, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

App Navigations

Left Nav

Standalone Cards

This is a content area next to a left nav. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a content area next to a left nav. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML

<div class="col-md-4 col-lg-3 col-lg-offset-1">
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">App Section One</a></li>
        <li><a href="#">App Section Two</a></li>
        <li><a href="#">App Section Three</a></li>
        <li><a href="#">App Section Four</a></li>
        <li><a href="#">App Section Five</a></li>
    </ul>
</div>

Problem Being Solved

Apps may contain subsections of similar content.

When to Use

This navigation should be used to group similar content / forms within an app. This makes it easier for a user to discover how to accomplish a specific task (e.g., changing their address within the Profile app).

When Not to Use

This pattern should not be used on the enterprise site. It is intended for the standalone Azure apps only.

Formatting

Left nav uses Bootstrap pill classes.

Right Nav

App Title

Page Title

Standalone Cards

This is a content area next to a right nav. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a content area next to a right nav. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML

<div class="col-md-4 col-lg-3 col-sm-4 col-lg-push-8 col-md-push-8 col-sm-push-8">
   <div id="nav-toggle" data-toggle="collapse" data-target="#pills" class="nav nav-pills nav-stacked nav-toggle">
       <span class="sr-only">Toggle navigation</span>
       <b>Step x of xx</b>
   </div>
   <ul id="pills" class="nav nav-pills nav-stacked right-nav-pills">
       <li><a href="#"><i class="icon pe-7s-check pe-va complete"></i><span>Link 1</span></a></li>
       <li aria-label="Link 2 Selected" class="active"><a href="#"><i class="icon pe-7s-check pe-va"></i><span>Link 2</span></a></li>
       <li><a href="#"><i class="icon pe-7s-check pe-va"></i><span>Link 3</span></a></li>
   </ul>
</div>

Problem Being Solved

A pattern is needed for progress tracking in registration.

When Not to Use

This pattern should not be used on the enterprise site. It is intended for the standalone Azure apps only.

Formatting

Right nav uses Bootstrap pill classes.

App Progress Tracker

App Title

Page Title

This is a content area next to a right nav. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML

<section>
    <div class="col-md-12 col-lg-10 col-lg-offset-1">
        <h1>App Title</h1>
        <h2 class="alt">Page Title</h2>
        <ul class="nav nav-pills zero-bottom-margin">
            <li class="completed"><a href="#">Select</a></li>
            <li class="active"><a href="#">Register</a></li>
            <li class="disabled"><a href="#">Checkout</a></li>
        </ul>
    </div>
    <div class="col-md-4 col-lg-3 col-sm-4 col-lg-push-8 col-md-push-8 col-sm-push-8">
        <div id="nav-toggle" data-toggle="collapse" data-target="#pills" class="nav nav-pills nav-stacked nav-toggle">
            <span class="sr-only">Toggle navigation</span>
            <b>Step x of xx</b>
        </div>
        <ul id="pills" class="nav nav-pills nav-stacked right-nav-pills">
            <li><a href="#"><i class="icon pe-7s-check pe-va complete"></i><span>Link 1</span></a></li>
            <li aria-label="Link 2 Selected" class="active"><a href="#"><i class="icon pe-7s-check pe-va"></i><span>Link 2</span></a></li>
            <li><a href="#"><i class="icon pe-7s-check pe-va"></i><span>Link 3</span></a></li>
        </ul>
    </div>
    <div class="col-md-8 col-lg-7 col-sm-8 col-lg-pull-2 col-md-pull-4 col-sm-pull-4">
        <fieldset class="card-standalone">
            This is a content area next to a right nav. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </fieldset>
    </div>
</section>

Problem Being Solved

The user wants to know where they are in a multi-page, multi-step process.

When To Use

It can be used to break down complex, lengthy tasks such as applying for membership. These tasks can be completed across several sessions, so the user needs a clear idea of what steps they have completed.

When Not to Use

It should only be used for complex, multi-page transactions in Azure.